<template>
  <view :class="['flex', { 'flex-wrap': props.warp }, 'justify-' + props.justify, 'align-' + props.align]"
    :style="style"><slot></slot
  ></view>
</template>

<script lang="ts" setup>
import { CSSProperties } from 'vue'

/** justify 布局下的水平排列方式: flex-start | flex-end | center | space-between | space-around
 * align 布局下的垂直排列方式: stretch|center|flex-start|flex-end|baseline|initial|inherit;
 * gutter 默认值0。元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
 * warp 是否换行。
 */
interface Props {
  gutter?: number;
  justify?: string;
  align?: string;
  // 是否换行
  warp?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  gutter: 0,
  justify: 'start',
  align: 'start',
  warp: false,
});
const style = computed(() => {
  const styles: CSSProperties = {}
  if (props.gutter) {
    styles.marginRight = styles.marginLeft = `-${props.gutter/2}rpx`
  }
  return styles
})
// const rowKls = computed(() => [
//   ns.b(),
//   ns.is(`justify-${props.justify}`, props.justify !== 'start'),
//   ns.is(`align-${props.align}`, props.align !== 'top'),
// ])
provide('gutter', props.gutter)
</script>

<style scoped>
</style>
